<template>
	<view :data-theme="theme()" :class="theme() || ''">
		<view class="topBox">
			<!-- tabs -->
			<view class="top-tabbar">
				<view v-for="(item,index) in tabsList" :key="index"
					:class="state_active == index ? 'tab-item active' : 'tab-item'" @click="stateFunc(index)">
					{{item.name}}
				</view>
			</view>
			<!-- 时间选择器 -->
			<view class="middle_pier" v-if="state_active != 4 && state_active != 5 ">
				<picker mode="date" :value="time" :start="startDate" :end="endDate" @change="bindDateChange"
					fields="month">
					<view class="picker">
						<view class="piet-time">{{time}}</view>
						<view class="icon iconfont icon-jiantou " style="font-size: 24rpx;"></view>
					</view>
				</picker>
			</view>
			<!-- box -->
			<view class="bottom-block" v-if="state_active != 4 && state_active != 5">
				<view class="ww50">
					<view class="text">{{totalNum||0}}</view>
					<view class="opacity08">分享{{tabsList[state_active].name}}人数</view>
				</view>
				<view class="ww50">
					<view class="text">{{totalIncome||0}}</view>
					<view class="opacity08">已获奖励</view>
				</view>
			</view>
			<!-- 团队奖 -->
			<view class="bottom-block" v-if="state_active == 5">
				<view class="ww50">
					<view class="text">{{DataTowList.totalIncome ||0}}</view>
					<view class="opacity08">累计奖励</view>
				</view>
			</view>
		</view>
		<!-- 列表 -->
		<view class="m-0-10" v-if="state_active != 4 && state_active != 5">
			<scroll-view scroll-y="true" class="scroll-Y scrollBox" :style="'height:' + scrollviewHigh + 'px;'"
				lower-threshold="50" @scrolltolower="scrolltolowerFunc">
				<block v-if="dataList.length != 0">
					<view v-for="(item,index) in dataList" :key="index" class="csrollFor">
						<image :src="item.avatarUrl" mode="aspectFit"></image>
						<view>
							<view class="d-f">
								<view class="csrollFor-name text-ellipsis">{{item.nickName}}</view>
								<view class="csrollFor-mob">{{item.mobile}}</view>
							</view>
							<view class="csrollFor-time">{{item.createTime}}</view>
						</view>
						<view class="csrollFor-mun">奖{{item.income}}元</view>
					</view>
				</block>
				<block v-else>
					<view class="none-data-box">暂无数据</view>
				</block>
			</scroll-view>
		</view>
		<!-- 团队奖 -->
		<view class="m-0-10" v-if="state_active == 5">
			<scroll-view scroll-y="true" class="scroll-Y scrollBox" :style="'height:' + scrollviewHigh + 'px;'"
				lower-threshold="50" @scrolltolower="scrolltolowerFunc">
				<block v-if=" DataTowList.itemList.length != 0">
					<view v-for="(item,index) in  DataTowList.itemList" :key="index" class="csrollFor p-20-0">
						<image :src="item.avatarUrl" mode="aspectFit"></image>
						<view>
							<view class="d-f">
								<view class="csrollFor-name">{{item.nickName}}</view>
								<view :class="item.flowType == 11?'csrollFor-type':'csrollFor-type2'">
									{{item.flowType == 11 ?'直推':'间推'}}
								</view>
							</view>
							<view class="csrollFor-mob2">{{item.mobile}}</view>
							<view class="csrollFor-time">{{item.createTime}}</view>
						</view>
						<view class="csrollFor-mun">奖{{item.income}}元</view>
					</view>
				</block>
				<block v-else>
					<view class="none-data-box">暂无数据</view>
				</block>
			</scroll-view>
		</view>
	</view>

</template>

<script>
	export default {

		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				scrollviewHigh: 0,
				tabsList: [{
					name: '新兵',
					weight: 1
				}, {
					name: '猪小兵',
					weight: 2
				}, {
					name: '猪团长',
					weight: 3
				}, {
					name: '猪司令',
					weight: 5
				}, {
					name: '推荐商家',
					weight: 0
				}],
				state_active: 0, //选择index
				time: '选择时间', //选取时间
				totalNum: 0, //分享人数
				totalIncome: 0, //以获取佣金
				dataList: [], //列表
				DataTowList: {
					itemList: []
				}, //团队奖列表
			}
		},
		onLoad(option) {

		},
		onShow() {
			let gradeId = uni.getStorageSync('userData').gradeId
			if (gradeId == 7) this.onWaytabsList(); //gradeId == 7猪司令
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		mounted() {
			this.init();
			this.getData();
		},
		methods: {
			/*初始化*/
			init() {
				let self = this;
				uni.getSystemInfo({
					success(res) {
						self.phoneHeight = res.windowHeight;
						// 计算组件的高度
						let view = uni.createSelectorQuery().select('.topBox');
						view.boundingClientRect(data => {
							let h = self.phoneHeight - data.height - 20;
							self.scrollviewHigh = h;
						}).exec();
					}
				});
			},
			// tabs数据处理
			onWaytabsList() {
				this.tabsList = [{
					name: '新兵',
					weight: 1
				}, {
					name: '猪小兵',
					weight: 2
				}, {
					name: '猪团长',
					weight: 3
				}, {
					name: '猪司令',
					weight: 5
				}, {
					name: '推荐商家',
					weight: 0
				}, {
					name: '团队奖',
					weight: 99
				}]
			},
			//获取数据
			getData(year, month) {
				let that = this
				let data = {}
				uni.showLoading({
					title: '加载中'
				})
				if (!year) {
					data = {
						weight: that.tabsList[that.state_active].weight
					}
				} else {
					data = {
						weight: that.tabsList[that.state_active].weight,
						year: year,
						month: month
					}
				}
				that._get('user/agent/shareProfitData', data, function(res) {
					that.dataList = res.data.itemList || [];
					that.totalNum = res.data.totalNum;
					that.totalIncome = res.data.totalIncome;
					uni.hideLoading();
				});
			},
			//获取团队奖数据
			getDataTow() {
				uni.showLoading({
					title: '加载中'
				})
				let that = this
				that._get('user/agent/teamProfitData', {}, function(res) {
					that.DataTowList = res.data;
					uni.hideLoading();
				});
			},
			// tabs切换
			stateFunc(index) {
				this.state_active = index
				if (index != 5) this.getData();
				if (index == 5) this.getDataTow()
				this.time = '选择时间'
			},
			//时间选取器
			bindDateChange(e) {
				this.time = e.detail.value
				let parts = e.detail.value.split('-');
				let year = parts[0];
				let month = parts[1];
				console.log(parts);
				this.getData(year, month)
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			//下拉
			scrolltolowerFunc() {
				console.log(11);
			},

		}

	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f2f2f2;
	}

	.top-tabbar {
		height: 96rpx;
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		overflow-x: auto;

		.tab-item {
			flex-shrink: 0;
			white-space: nowrap;
			flex: auto;
		}
	}

	.topBox {
		font-family: PingFang SC;

		.middle_pier {
			margin: 15rpx 10rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			border: 1px solid #DBDBDB;
			height: 70rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.picker {
				display: flex;
				align-items: center;

				.piet-time {
					font-weight: bold;
					font-size: 30rpx;
					color: #333333;
					margin-right: 20rpx;
				}

				image {
					width: 34rpx;
					height: 34rpx;
					display: block;
				}
			}

		}

		.bottom-block {
			height: 140rpx;
			background: #14854D;
			border-radius: 10rpx;
			margin: 15rpx 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			color: #FFFFFF;
			font-weight: 400;
			font-size: 26rpx;
			font-family: PingFang SC;

			.text {
				font-weight: bold;
				font-size: 34rpx;
				margin-bottom: 10rpx;
			}
		}
	}

	.scrollBox {
		font-family: PingFang SC;

		.csrollFor {
			display: flex;
			align-items: center;
			background-color: #FFF;
			margin-bottom: 10rpx;
			height: 120rpx;
			border-radius: 10rpx;
			color: #333333;

			.csrollFor-name {
				font-weight: bold;
				font-size: 30rpx;
				width: 180rpx;
			}

			.csrollFor-mob2 {
				font-weight: bold;
				font-size: 28rpx;
				margin-top: 5rpx;
			}

			.csrollFor-type {
				border-radius: 10rpx;
				background-color: #14854D;
				color: #FFF;
				line-height: 40rpx;
				text-align: center;
				width: 70rpx;
				height: 40rpx;
				margin-left: 20rpx;
				font-size: 22rpx;
			}

			.csrollFor-type2 {
				border-radius: 10rpx;
				border: 1rpx solid #14854D;
				color: #14854D;
				line-height: 40rpx;
				text-align: center;
				width: 70rpx;
				height: 40rpx;
				margin-left: 20rpx;
				font-size: 22rpx;
			}

			.csrollFor-mob {
				font-weight: 400;
				font-size: 26rpx;
				color: #666;
				margin-left: 30rpx;
			}

			.csrollFor-time {
				font-weight: 400;
				font-size: 26rpx;
				color: #999999;
				margin-top: 10rpx;
			}

			.csrollFor-mun {
				flex: 1;
				text-align: right;
				margin-right: 20rpx;
				font-weight: bold;
				font-size: 30rpx;
			}

			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				display: block;
				margin: 0 30rpx;
			}
		}
	}
</style>